<template>
	<view>
		<uni-nav-bar backgroundColor="#1678FF" fixed="true" :border="false"></uni-nav-bar>
		<view class="content">
			<!-- 正文内容 -->
			<view class="top-bg"></view>
			<view class="content-box">
				<view class="card">
					<view class="userinfo d-flex align-center" @click="analysis">
						<view class="avatar">
							<image :src="src" mode=""></image>
						</view>
						<text class="font-bold font-22 ml-3">{{userName}}</text>
					</view>
					<view class="tab_box d-flex justify-space-between mt-2 pt-2">
						<view class="tab_item flex-column justify-center align-center"
							v-for="(item , index) in tabsincome" :key="index+'tab'" @click="handSincome(item)">
							<view class="font-22 font-bold mb-2"><text>{{item.price}}</text></view>
							<view><text>{{item.title}}</text></view>
						</view>
					</view>
				</view>
				<view class="">
					<uni-notice-bar show-icon scrollable :text="noticelist.toString()"></uni-notice-bar>
				</view>
				<view class="card-order mt-4">
					<view class="font-bold font-22"><text>订单统计</text></view>
					<view class="d-flex justify-space-between mt-2 pt-2">
						<view class="tab_itemorder flex-column justify-center align-center"
							v-for="(item , index) in tabsorder" :key="index+'tab'" @click="handOrder(item)">
							<view class="font-22 font-bold mb-2"><text>{{item.num}}</text></view>
							<view><text>{{item.title}}</text></view>
						</view>

					</view>
				</view>
				<view class="tab_tabs mt-4">
					<view class="d-flex justify-space-between ">
						<view class="tab_itemorder flex-column justify-center align-center"
							v-for="(item , index) in tabs" :key="index+'tab'" @click="handTabs(item.id)">
							<image class="mb-2" :src="item.image" mode=""></image>
							<view><text>{{item.title}}</text></view>
						</view>

					</view>
				</view>
				<!-- 统计 -->
				<view class="statistics-box mt-4">
					<view class="d-flex align-center justify-space-between">
						<view class="font-bold font-22"><text>统计</text></view>
						<view class="d-flex align-start">
							<view class="statis-tag" :class="tabindex==index ? 'active' : ''" v-for="(item , index) in statistics" :key="index" @click="changeTag(index)"><text>{{item.title}}</text></view>
						</view>
					</view>
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#1678FF',
				},
				// 收益
				tabsincome: [{
						price: '1225.00',
						title: '本年度收益'
					},
					{
						price: '0.00',
						title: '今日收益'
					},
					{
						price: '1225.00',
						title: '昨日收益'
					},
				],
				// 订单
				tabsorder: [{
						num: '5',
						title: '昨日订单'
					},
					{
						num: '4',
						title: '今日订单'
					},
					{
						num: '6',
						title: '累计订单'
					},
					{
						num: '8',
						title: '累计激活'
					},
				],
				tabs: [{
						image: ('../../static/dataImages/goods.png'),
						title: '商品',
						id:1,
					},
					{
						image: ('../../static/dataImages/ordersearch.png'),
						title: '订单查询',
						id:2
					},
					{
						image: ('../../static/dataImages/agent.png'),
						title: '代理',
						id:3
					},
					{
						image: ('../../static/dataImages/money.png'),
						title: '财务',
						id:4
					},
				],
				noticelist: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				src: 'https://himg.bdimg.com/sys/portrait/item/public.1.2c2d3530.7zQeaCPjHsxhpbum6Bw5Fg.jpg',
				chartData: {},
				statistics:[
					{title:'预估收入',id:1},
					{title:'订单数量',id:2},
				],
				tabindex:0,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				dataAll:[],
				userName:'',
			}
		},
		onReady() {
			this.init();
			// this.getServerData();
			
		},
		methods: {
			analysis(){
				uni.navigateTo({
					url:'/pages/data/analysis'
				})
			},			
			// 点击收益金刚区
			handSincome(item) {

			},
			// 点击订单金刚区
			handOrder(item) {
				console.log(item,44444444);
			},
			handTabs(item) {
				let npage = '';
				let type = 'to';
				if(item==1){
					npage ='/pages/goods/index';
					// uni.$my.dumpPage(npage,{},type);
				}else if(item == 2){
					npage = '/pages/order/index';
					type ='launch';
				}else if(item == 3){
					npage = '/pages/agent/index';
					type ='launch';
				}else if(item == 4){
					npage = '';
				}
				uni.$my.dumpPage(npage,{},type);
				// console.log(item,5555555);
			},
			changeTag(index){
				this.tabindex=index
				// 切换tab，请求不同的数据，赋值给图表
				if(index==0){
					this.getServerData()
					
				}else{
					this.getServerData2()
				}
			},
			getServerData(type) {
				let ress = {
					categories: this.dataAll.cashSer.totle,
					series: [{
							name: "预估收入",
							data: this.dataAll.cashSer.totleActNums
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(ress));
			},
			getServerData2(type) {
				//模拟从服务器获取数据时的延时
				// setTimeout(() => {
				// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				// 	let res = {
				// 		categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				// 		series: [{
				// 				name: "订单数量",
				// 				data: [35, 99, 15, 37, 22, 20]
				// 			}
				// 		]
				// 	};
				// 	this.chartData = JSON.parse(JSON.stringify(res));
				// }, 500);
				let ress = {
					categories: this.dataAll.orderSer.totle,
					series: [{
							name: "预估收入",
							data: this.dataAll.orderSer.totleActNums
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(ress));
			},
			init(){
				uni.$uv.http.post('/cash/order').then(res => {
					// console.log(res,4444444);
					this.dataAll =  res.data;
					this.userName= res.data.user_name;
					this.tabsincome[0].price = res.data.cash.totleNian || 0.0;
					this.tabsincome[1].price = res.data.cash.totleJin || 0.0;
					this.tabsincome[2].price = res.data.cash.totleZuo || 0.0;
					
					this.tabsorder[0].num = res.data.order.totleDayZuo || 0;
					this.tabsorder[1].num = res.data.order.totleDay || 0;
					this.tabsorder[2].num = res.data.order.totle || 0;
					this.tabsorder[3].num = res.data.order.totleAct || 0;
					// console.log(res.data.cashSer.totle,11111111);
					let ress = {
						categories: res.data.cashSer.totle,
						series: [{
								name: "预估收入",
								data: res.data.cashSer.totleActNums
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(ress));
					// this.bannerlist = res.data.swiper;
					// this.gridList = this.makeServerPicUrl(res.data.grid || '', 'pic')
					// this.bannerlist = this.makeServerPicUrl(res.data.swiper || '', 'pic');
					// console.log(this.bannerlist);
					// this.adList = this.makeServerPicUrl(res.data.ad || '', 'pic')
					// this.tabList = res.data.tab || []
					// this.popAd = this.makeServerPicUrl(res.data.pop || '', 'pic')
					// if (!this.isEmpty(this.popAd) && !this.isReInit) {
					// 	this.openPopAd()
					// }
					// if (!this.isEmpty(this.tabList)) {
					// 	this.getTabData()
					// }
					// console.log(res)
				}).catch(e => {
					console.log(e)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		
		padding-bottom: 100rpx;
	}
	.top-bg {
		width: 100%;
		height: 200rpx;
		margin-top: -4rpx;
		background-color: #1678FF;
		border-bottom-left-radius: 30%;
		border-bottom-right-radius: 30%;
	}

	.content-box {
		padding: 0 20rpx 20rpx 20rpx;

		.card {
			padding: 30rpx;
			width: 100%;
			height: 288rpx;
			margin-top: -160rpx;
			background: linear-gradient(180deg, #E5F0FF 0%, #FFFFFF 100%);
			border-radius: 16rpx 16rpx 0px 0px;
			.avatar{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}

		.tab_box {
			border-top: 1px solid rgba(0, 0, 0, 0.1);

			.tab_item {
				width: 33%;
				text-align: center;
			}

		}

		.card-order {
			padding: 30rpx;
			width: 100%;
			height: 288rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.tab_itemorder {
				width: 25%;
				text-align: center;
			}
		}

		.tab_tabs {
			padding: 30rpx;
			width: 100%;
			height: 228rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.tab_itemorder {
				width: 25%;
				text-align: center;
			}

			image {
				width: 110rpx;
				height: 110rpx;
			}
		}

		.statistics-box {
			padding: 30rpx;
			width: 100%;
			// height: 600rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			.statis-tag{
				width: 142rpx;
				text-align: center;
				line-height: 60rpx;
				height: 60rpx;
				color: #1E1E1E;
				background:#F1F3F7;
				
			}
			.active{
				background: #1678FF;
				color: #FFFFFF;
			}
		}
	}
</style>